<template>
	<view class="tcr-purse">
		<view class="tcr-purse-overview">
			<view class="tcr-purse-overview-item">
				<view class="tcr-purse-overview-item-amount">{{ totalPoints }}</view>
				<view class="tcr-purse-overview-item-desc">积分余额</view>
			</view>
			<view class="tcr-purse-overview-item">
				<view class="tcr-purse-overview-item-amount">{{ todayPoints }}</view>
				<view class="tcr-purse-overview-item-desc">今日积分</view>
			</view>
		</view>
		<scroll-view class="tcr-purse-list" scroll-y="true" @scrolltolower="handleLower">
			<view class="tcr-purse-list-item" v-for="item in purseLogList" :key="item.id" >
				<view class="tcr-purse-list-item-desc tcr-ellipsis">{{ item.useRemarks }}</view>
				<view class="tcr-purse-list-item-amount">
					<text v-if="item.expenseType == 1" style="color: green;">+{{ item.useAmount }}</text>
					<text v-else style="color: red;">-{{ item.useAmount }}</text>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import apis from '../../apis/apis.js';
	
	export default {
		data() {
			return {
				purseLogList: [],
				queryParam: {
					pageNum: 1, 
					pageSize: 20,
				},
				totalCount: 0,
				totalPoints: 0,
				todayPoints: 0,
			};
		},
		onLoad() {
			// 加载钱包日志
			this.queryPurseLog();
			// 获取钱包汇总信息
			this.loadPurseOverallInfo();
		},
		methods: {
			handleLower() {
				// 页面滚动到底部触发
				if (this.totalCount > this.purseLogList.length) {
					this.queryParam.pageNum = this.queryParam.pageNum + 1;
					this.queryPurseLog();
				}
			},
			queryPurseLog(query) {
				const that = this;
				this.$http.get({
					url: apis.getMinePurseFlow,
					data: this.queryParam,
				}).then(res => {
					if (res.code === 200) {
						that.purseLogList = [...that.purseLogList, ...res.rows];
						this.totalCount = res.total;
					}
				}).catch(err => {
					console.log('调用接口失败：', err);
				});
			},
			loadPurseOverallInfo() {
				this.$http.get({
					url: apis.getMinePurse
				}).then(res => {
					if (res.code === 200) {
						this.totalPoints = res.data.totalPoints;
						this.todayPoints = res.data.todayPoints;
					}
				}).catch(err => {
					console.log('调用接口失败：', err);
				});
			}
		}
	}
</script>

<style lang="scss">
	
	.tcr-purse {
		box-sizing: border-box;
		height: 100vh;
		overflow: hidden;
		display: flex;
		flex-flow: column;
		align-items: center;
		
		&-overview {
			padding: 20rpx;
			background: #ffffff;
			display: flex;
			align-items: center;
			justify-content: space-around;
			height: 140rpx;
			width: 100%;
			border-bottom: 1px solid #f0f0f0;
			box-sizing: border-box;
			
			
			&-item {
				display: flex;
				align-items: center;
				justify-content: center;
				flex-flow: column;
				
				&-amount {
					font-size: 40rpx;
					font-weight: 600;
				}
				
				&-desc {
					font-size: 32rpx;
					color: #666666;
				}
			}
			
		}
		
		&-list {
			flex: 1;
			overflow-y: auto;
			padding: 0 20rpx;
			width: 100%;
			box-sizing: border-box;
			
			&-item {
				padding: 20rpx 0;
				display: flex;
				align-items: center;
				justify-content: space-between;
				
				&-desc {
					flex: 1;
				}
				
				&-amount {
					width: 200rpx;
					text-align: right;
				}
			}
		}
	}

</style>
